<template>
	<view class="content">
		<z-paging ref="paging" v-model="listData" @query="queryList">
			<uni-search-bar
				@confirm="search"
				v-model="buildingNameOrDeviceName"
				placeholder="请输入设备名称或者建筑物"
				@input="input"
				@cancel="cancel"
				@clear="clear"
			></uni-search-bar>
			<view class="flexrowspacearound">
				<view style="background-color: #f6fafe" class="padding topcontent">
					<view class="flexrowcenter">
						<image class="topimageicon" src="@/static/images/common/devices-number.png"></image>
						<text class="text-lg margin-lr">{{ deviceCount }}</text>
						<text class="text-sm">台</text>
					</view>
					<view class="text-black text-df margin-left-sm margin-top-sm">设备数量</view>
				</view>
				<view style="background-color: #eefafe" class="padding topcontent">
					<view class="flexrowcenter">
						<image class="topimageicon" src="@/static/images/common/detectors-number.png"></image>
						<text class="text-lg margin-lr">{{ slaveCount }}</text>
						<text class="text-sm">台</text>
					</view>
					<view class="text-black text-df margin-left-sm margin-top-sm">探测器数量</view>
				</view>
			</view>

			<title-bar
				isDevices
				haveTip
				:onlineNumber="onLineCount"
				:offlineNumber="offLineCount"
				:tabIndex="tabTitleIndex"
				rightText=""
				@handleListBarTitleClick="handleListBarTitleClick"
			/>

			<device-nodeal-list-item v-for="(dataitem, index) in listData" :key="index" @deviceNoDealListItemClick="deviceNoDealListItemClick" :data="dataitem" />
			<!--      <button size="mini" @click="connect">连接mqtt</button>-->
		</z-paging>
	</view>
</template>

<script>
import MQTT from 'utils/mqtt';
import { buildingDevicePage, getDeviceSlaveCount } from '@/api/devices/index';
export default {
	data() {
		return {
			listData: [],
			tabTitleIndex: '0',
			buildingNameOrDeviceName: '',
			lineStatus: '1', //设备状态: 0:离线 1:在线

			deviceCount: 0,
			offLineCount: 0,
			onLineCount: 0,
			slaveCount: 0
		};
	},
	computed: {},
	onLoad() {},
	onShow() {
		this.getDeviceSlaveCountQuery();
		this.queryList(1,10)
	},
	methods: {
		handleListBarTitleClick(tabindex) {
			this.tabTitleIndex = tabindex;
			if (tabindex == '0') {
				this.lineStatus = '1';
				this.$refs.paging.refresh();
			}
			if (tabindex == '1') {
				this.lineStatus = '0';
				this.$refs.paging.refresh();
			}
		},
		deviceNoDealListItemClick(data) {
			uni.navigateTo({
				url: '/pages/devices/detail/index?deviceId=' + data.deviceId
			});
		},
		getDeviceSlaveCountQuery() {
			getDeviceSlaveCount({
				buildingNameOrDeviceName: this.buildingNameOrDeviceName
			}).then((res) => {
				console.log('res>>', res);
				const data = res.data;
				this.deviceCount = data.deviceCount;
				this.offLineCount = data.offLineCount;
				this.onLineCount = data.onLineCount;
				this.slaveCount = data.slaveCount;
			});
		},
		queryList(pageNo, pageSize) {
			console.log('this.buildingNameOrDeviceName>>', this.buildingNameOrDeviceName);
			this.getDeviceSlaveCountQuery();
			if (pageNo == 1) {
				uni.showLoading({
					title: '请求中...'
				});
			}
			buildingDevicePage({
				size: pageSize,
				pages: pageNo,
				buildingNameOrDeviceName: this.buildingNameOrDeviceName,
				lineStatus: this.lineStatus
			}).then((res) => {
				uni.hideLoading();
				const listData = res.data.list || []; // 读取 data 数据
				this.$refs.paging.complete(listData);
			});
		},
		goToNext() {
			console.log('quanbu');
		},
		search(confirmData) {
			console.log('confirmData>>>', confirmData);
			console.log('buildingNameOrDeviceName>>>', this.buildingNameOrDeviceName);
			this.$refs.paging.refresh();
			this.getDeviceSlaveCountQuery();
		},
		input(textInputData) {
			console.log('textInput>>>', textInputData);
		},
		cancel(cancelData) {
			console.log('cancelData>>>', cancelData);
			this.$refs.paging.refresh();
			this.getDeviceSlaveCountQuery();
		},
		clear(clearData) {
			console.log('clear>>>', clearData);
			this.$refs.paging.refresh();
			this.getDeviceSlaveCountQuery();
		}
	}
};
</script>

<style scoped>
.content {
	height: 100%;
	padding-bottom: calc(var(--window-bottom) + 20px);
	background-image: linear-gradient(to bottom, #add8e6, #fff);
}
.topimageicon {
	width: 40px;
	height: 40px;
}
.topcontent {
	width: 320rpx;
	border-radius: 6px;
}
</style>
